<template>
  <!-- 音乐控制 -->
  <div class="song-play-bar">
    <div
      class="song-control"
      ref="songControl"
      @mouseenter="showSongControl"
      @mouseleave="hideSongControl"
    >
      <div class="updn">
        <a href="javascript:;" class="lock" v-show="lock" @click="lock = !lock">
          <i class="iconfont">&#xe627;</i>
        </a>
        <a
          href="javascript:;"
          class="unlock"
          v-show="!lock"
          @click="lock = !lock"
        >
          <i class="iconfont">&#xe61f;</i>
        </a>
      </div>
      <div class="bg"></div>
      <div class="hand" title="展开播放条"></div>
      <div class="song-player">
        <audio
          preload
          ref="audio"
          :src="src"
          @pause="handlePlay(2)"
          @play="handlePlay(1)"
          @loadedmetadata="getAudioLength()"
          @timeupdate="audioTimeUpdate"
          @ended="loopMode"
          hidden="true"
        ></audio>
        <div class="btns">
          <a href="javascript:;" class="prev" title="上一首" @click="prevSong">
            <i class="iconfont">&#xe8d1;</i>
          </a>
          <a
            href="javascript:;"
            class="play"
            title="播放/暂停"
            @click="playAudio"
          >
            <i class="iconfont" v-show="!play">&#xe8ca;</i>
            <i class="iconfont" v-show="play">&#xe8cb;</i>
          </a>
          <a href="javascript:;" class="next" title="下一首" @click="nextSong">
            <i class="iconfont">&#xe8d2;</i>
          </a>
        </div>
        <div class="head">
          <a href="javascript:;" @click="clickSong(currentSong.id)">
            <img
              v-if="currentSong.al"
              :src="currentSong.al.picUrl"
              alt=""
              class="song-pic"
            />
          </a>
        </div>
        <div class="play">
          <div class="words">
            <h4 class="song-name">
              <a
                href="javascript:;"
                @click="clickSong(currentSong.id)"
                :title="currentSong.name"
              >
                {{ currentSong.name }}
              </a>
            </h4>
            <span class="song-mv" v-show="currentSong.mv != 0">
              <a
                href="javascript:;"
                title="MV"
                @click="clickMv(currentSong.mv)"
              >
                <i class="iconfont">&#xe640;</i>
              </a>
            </span>
            <span class="song-vip" v-show="currentSong.fee == 1">
              <i class="iconfont">&#xec48;</i>
            </span>
            <h4 class="song-artist">
              <a
                v-for="(art, n) in currentSong.ar"
                :key="n"
                href="javascript:;"
                @click="clickArtist(art.id)"
                :title="art.name"
              >
                <i v-if="n > 0"> / </i>
                {{ art.name }}
              </a>
            </h4>
          </div>
          <div class="progress">
            <span class="song-progress">
              <!-- 进度条 -->
              <el-slider
                class="commonSlider"
                :show-tooltip="false"
                v-model="currentTime"
                :max="audioLength"
                @change="changeSongTime"
              >
              </el-slider>
            </span>
            <span class="song-time">
              <span>{{ (currentTime * 1000) | changeTime }}</span> /
              {{ (audioLength * 1000) | changeTime }}
            </span>
          </div>
        </div>
        <div class="oper">
          <a href="javascript:;" title="收藏" @click="clickCol(currentSong.id)">
            <i class="iconfont">&#xe8c8;</i>
          </a>
          <a href="javascript:;" title="分享" @click="clickShare(currentSong)">
            <i class="iconfont">&#xe8af;</i>
          </a>
        </div>
        <div class="ctrl">
          <span class="song-voice">
            <span @click="setMuted">
              <i class="iconfont" v-show="!mute">&#xe8cd;</i>
              <i class="iconfont" v-show="mute">&#xe8ce;</i>
            </span>
            <span class="song-voice-slide">
              <el-slider
                @input="changeSongVoice"
                v-model="voice"
                vertical
                height="100px"
              >
              </el-slider>
            </span>
          </span>
          <span class="song-loop" @click="changeLoop">
            <a href="javascript:;" v-show="loop == 0" :title="loopTitle[0]">
              <i class="iconfont">&#xe66c;</i>
            </a>
            <a href="javascript:;" v-show="loop == 1" :title="loopTitle[1]">
              <i class="iconfont">&#xe66d;</i>
            </a>
            <a href="javascript:;" v-show="loop == 2" :title="loopTitle[2]">
              <i class="iconfont">&#xe66b;</i>
            </a>
          </span>
          <span class="add">
            <span class="tip" v-show="haveSong">{{ addMessage }}</span>
            <span class="bg"></span>
            <a
              href="javascript:;"
              class="list-icon"
              title="播放列表"
              @click="showListC"
            >
              <i class="iconfont">&#xe600;</i>
              {{ songListsLength }}
            </a>
          </span>
          <span class="tip" :title="loopTitle[loop]" v-show="showLoop">
            {{ loopTitle[loop] }}
          </span>
        </div>
      </div>
      <div class="list" ref="list">
        <div class="list-hd">
          <h4>
            播放列表
            <span class="list-count">({{ songListsLength }})</span>
          </h4>
          <a href="javascript:;" class="add-all">
            <i class="iconfont">&#xe8c8;</i>
            收藏全部
          </a>
          <a href="javascript:;" class="clear" @click="clearAll">
            <i class="iconfont">&#xe617;</i>
            清除
          </a>
          <span class="line"></span>
          <p class="s-name" v-if="showSong">{{ currentSong.name }}</p>
          <span class="close" @click="closeListC">
            <i class="iconfont">&#xec47;</i>
            关闭
          </span>
        </div>
        <div class="list-bd">
          <div v-if="currentSong.al">
            <img :src="currentSong.al.picUrl" alt="" class="list-bg" />
          </div>
          <div class="msk"></div>
          <div class="no-song" v-if="!showSong">
            你还没有添加任何歌曲
            <br />
            去首页<a href="javascript:;" @click="clickHome">发现音乐</a>，或在<a
              href="javascript:;"
              @click="clickMy"
              >我的音乐</a
            >收听自己收藏的歌单
          </div>
          <div class="list-song" v-if="showSong">
            <ul class="list-song-ul clearfix">
              <li
                :class="[
                  'list-song-item',
                  { 'active-item': currentItem == index },
                ]"
                v-for="(item, index) in songLists"
                :key="index"
              >
                <div class="item-play">
                  <i class="iconfont" v-show="currentItem == index">&#xe8ca;</i>
                </div>
                <div
                  class="item-songname"
                  @mouseover="showControl(index)"
                  @mouseleave="hideControl(index)"
                >
                  <div class="item-name-txt">
                    <a
                      href="javascript:;"
                      :title="item.name"
                      @click="playNewSong(index)"
                    >
                      {{ item.name }}
                    </a>
                    <span class="songlist-mv" v-if="item.mv != 0">
                      <a
                        href="javascript:;"
                        title="MV"
                        @click="clickMv(item.mv)"
                      >
                        <i class="iconfont">&#xe640;</i>
                      </a>
                    </span>
                    <span class="songlist-vip" v-if="item.fee == 1">
                      <i class="iconfont">&#xec48;</i>
                    </span>
                    <span class="songlist-buy" v-if="item.fee == 4">
                      <i class="iconfont">&#xe8d0;</i>
                    </span>
                  </div>
                  <div class="item-control">
                    <a
                      href="javascript:;"
                      title="收藏"
                      @click="clickCol(item.id)"
                    >
                      <i class="iconfont">&#xe8c8;</i>
                    </a>
                    <a
                      href="javascript:;"
                      title="分享"
                      @click="clickShare(item)"
                    >
                      <i class="iconfont">&#xe8af;</i>
                    </a>
                    <a href="javascript:;" title="下载">
                      <i class="iconfont">&#xe8a6;</i>
                    </a>
                    <a
                      href="javascript:;"
                      title="删除"
                      @click="clearOne(index)"
                    >
                      <i class="iconfont">&#xe617;</i>
                    </a>
                  </div>
                </div>
                <div class="item-artist">
                  <a
                    v-for="(art, n) in item.ar"
                    :key="n"
                    href="javascript:;"
                    @click="clickArtist(art.id)"
                    :title="art"
                  >
                    <i v-if="n > 0"> / </i>
                    {{ art.name }}
                  </a>
                </div>
                <div class="item-time">{{ item.dt | changeTime }}</div>
              </li>
            </ul>
          </div>
          <span class="list-song-position" @click="positionSong">
            <i class="iconfont">&#xe77e;</i>
          </span>
          <div class="msk2"></div>
          <!-- <div v-if="showSong"> -->
          <!-- <div class="no-lyric" v-if="currentSong.id != '' && !showLyric">
            暂无歌词
          </div> -->
          <div class="song-lyric" v-show="showLyric">
            <div class="lyric-content">
              <div class="lyric-item-wrapper" ref="lyric">
                <p
                  :class="['lyric-item', { active: activeIndex === i }]"
                  v-for="(il, i) in lyric[0]"
                  :key="i"
                  @click="lyricClick(il, i)"
                  @mousedown="moveLyric(i)"
                >
                  {{ il.content }}
                </p>
              </div>
            </div>
          </div>
          <!-- </div> -->
        </div>
      </div>
    </div>
    <div class="song-message-show" v-if="showTip" id="messageShow">
      <h4 class="song-message-hd">
        提示
        <span class="close" @click="closeListS">
          <i class="iconfont">&#xec47;</i>
          关闭
        </span>
      </h4>
      <div class="song-message-bd">
        <div class="song-message-content">
          <p>{{ tipMessage }}</p>
        </div>
        <div class="song-message-btn">
          <el-button type="primary" size="small" @click="closeListS"
            >知道了</el-button
          >
        </div>
      </div>
    </div>
    <small-tip :tipMessage="smallTipMsg" v-if="showSmallTip"></small-tip>
  </div>
</template>

<script>
import { changeTime } from "common/time.js";
import { lrc2Json } from "common/lyric.js";
import user from "assets/images/user.png";
import SmallTip from "components/tip/SmallTip";

export default {
  components: {
    SmallTip,
  },
  data() {
    return {
      lock: false,
      // 播放还是暂停 true播放中
      play: false,
      // 歌曲当前的播放时间
      currentTime: 0,
      // 歌曲时间总长
      audioLength: 0,
      // 标记时间戳
      lastTime: 0,
      // 静音
      mute: false,
      // 音量
      voice: 30,
      lastVoice: 30,
      // 循环模式
      loop: 0,
      loopTitle: ["循环", "单曲循环", "随机"],
      showLoop: false,
      songLists: [],
      songListsLength: 0,
      // 显示歌曲列表 有歌曲时为true
      showSong: true,
      // 显示歌词 有歌词时为true
      showLyric: false,
      cs: [],
      ns: [],
      src: "",
      lyric: [[], []],
      // 当前播放的歌词索引
      activeIndex: 0,
      // 标记鼠标移动歌词
      moveL: false,
      timeOutL: null,
      // 当前正在播放的歌曲，要与state中的currentSong一致
      currentItem: 0,
      // 上一次播放的歌曲index
      lastItem: 0,
      currentSong: {},
      showList: false,
      // 用来锁定lock
      lockTime: false,
      // 添加歌曲提示
      haveSong: false,
      // 默认图片
      user: user,
      // 添加、播放提示
      addMessage: "已添加到播放列表",
      // 显示提示信息
      showTip: false,
      tipMessage: "",
      showSmallTip: false,
      smallTipMsg: "操作提示",
    };
  },
  watch: {
    "$store.state.haveSong": function () {
      if (this.$store.state.haveSong) {
        this.haveSong = true;
        this.addMessage = "已添加到播放列表";
        setTimeout(() => {
          this.haveSong = false;
        }, 1000);
        // this.$store.state.haveSong = false;
        this.$store.commit("changeHaveSong", false);
      }
    },
    "$store.state.addSong": function () {
      if (this.$store.state.addSong) {
        this.getSongList();
        // this.$store.state.addSong = false;
        this.$store.commit("changeAddSong", false);
      }
    },
    "$store.state.clickPlaySong": function () {
      if (this.$store.state.clickPlaySong) {
        this.haveSong = true;
        this.addMessage = "开始播放歌曲";
        setTimeout(() => {
          this.haveSong = false;
        }, 1000);
        this.clickPlaySong();
        // this.$store.state.clickPlaySong = false;
        this.$store.commit("changeClickPlaySong", false);
      }
    },
  },
  filters: {
    // 将毫秒数转换为时分秒
    changeTime(time) {
      return changeTime(time);
    },
  },
  mounted() {
    this.getSongList();
    this.playInit();
  },
  methods: {
    clickShare(item) {
      if (this.$store.state.isLogin) {
        let newItem = {
          id: item.id,
          type: "song",
          name: item.name,
        };
        item.ar.forEach((item, index) => {
          if (index == 0) {
            newItem.artist = item.name;
          } else {
            newItem.artist += "/" + item.name;
          }
        });
        console.log(newItem);
        this.$store.commit("changeShowShare", true);
        this.$store.commit("changeShareItem", newItem);
      } else {
        this.smallTipMsg = "请登录后再分享歌曲";
        this.showSmallTip = true;
        setTimeout(() => {
          this.showSmallTip = false;
        }, 1000);
      }
    },
    clickCol(id) {
      if (this.$store.state.isLogin) {
        this.$store.commit("changeShowCollect", true);
        this.$store.commit("changeSId", id);
      } else {
        this.smallTipMsg = "请登录后再收藏歌曲";
        this.showSmallTip = true;
        setTimeout(() => {
          this.showSmallTip = false;
        }, 1000);
      }
    },
    moveA(e) {
      console.log("123");
      let el = document.getElementById("messageShow");
      e = e || window.event;
      // 鼠标到myAdd的距离
      var disX = e.clientX - el.offsetLeft;
      var disY = e.clientY - el.offsetTop;
      document.onmousemove = function (e) {
        var l = e.clientX - disX;
        var t = e.clientY - disY;
        console.log(t);
        if (l <= 250) {
          el.style.left = "250px";
        } else if (l + 250 >= document.body.clientWidth) {
          el.style.left =
            document.body.clientWidth - 8 - el.offsetWidth / 2 + "px";
        } else {
          el.style.left = l + "px";
        }
        if (t <= 10) {
          el.style.top = "10px";
        } else if (t + 165 >= document.body.clientHeight) {
          el.style.top = "752px";
        } else {
          el.style.top = t + "px";
        }
      };
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null;
      };
    },
    positionSong() {
      // 定位到当前播放歌曲的位置
      let div = document.querySelector(".list-song");
      div.scrollTop = this.currentItem * 30;
    },
    changeLoop() {
      if (this.loop < 2) {
        this.loop++;
      } else {
        this.loop = 0;
      }
      this.showLoop = true;
      setTimeout(() => {
        this.showLoop = false;
      }, 1000);
    },
    loopMode() {
      // 播放结束事件，随机、循环、单曲循环
      let s = localStorage.getItem("songLists");
      if (s) {
        s = JSON.parse(s);
        let l = s.length;
        this.lastItem = this.currentItem;
        if (this.loop == 2) {
          // 随机事件
          let a = Math.floor(Math.random() * l);
          // this.$store.state.currentSong = a;
          this.$store.commit("changeCurrentSong", a);
          this.currentItem = a;
          this.play = true;
          this.$refs.audio.play();
          this.playInit();
        } else if (this.loop == 0) {
          // 循环事件
          if (this.currentItem < l - 1) {
            // this.$store.state.currentSong++;
            this.$store.commit(
              "changeCurrentSong",
              this.$store.state.currentSong + 1
            );
            this.currentItem++;
          } else {
            // this.$store.state.currentSong = 0;
            this.$store.commit("changeCurrentSong", 0);
            this.currentItem = 0;
          }
          this.play = true;
          this.$refs.audio.play();
          this.playInit();
        } else if (this.loop == 1) {
          // 单曲循环
          this.currentTime = 0;
          this.lastTime = 0;
          this.play = true;
          this.$refs.audio.play();
          this.$refs.audio.volume = this.voice / 100;
        }
      } else {
        this.play = false;
        this.$refs.audio.pause();
      }
    },
    clearAll() {
      localStorage.removeItem("songLists");
      this.getSongList();
    },
    clearOne(index) {
      console.log(index);
      var s = localStorage.getItem("songLists");
      s = JSON.parse(s);
      // 删除一个
      s.splice(index, 1);
      if (s.length > 0) {
        s = JSON.stringify(s);
        localStorage.setItem("songLists", s);
        this.getSongList();
      } else {
        localStorage.removeItem("songLists");
        this.getSongList();
      }
    },
    clickPlaySong() {
      // 点击‘播放’
      this.lastItem = this.currentItem;
      let s = localStorage.getItem("songLists");
      s = JSON.parse(s);
      // this.$store.state.currentSong = this.$store.state.lastLength;
      this.$store.commit("changeCurrentSong", this.$store.state.lastLength);
      this.currentItem = this.$store.state.lastLength;
      this.currentSong = s[this.currentItem];
      this.currentTime = 0;
      this.lastTime = 0;
      // console.log(s.length);
      // console.log(this.currentSong.name);
      this.play = true;
      this.getSongLyric();
      this.getSongUrl();
      this.getSongList();
    },
    playNewSong(index) {
      // 点击列表中的歌曲
      this.lastItem = this.currentItem;
      // this.$store.state.currentSong = index;
      this.$store.commit("changeCurrentSong", index);
      this.currentItem = index;
      this.playInit();
    },
    prevSong() {
      // 先判断localStorage中有没有歌曲
      this.lastItem = this.currentItem;
      let s = localStorage.getItem("songLists");
      if (s) {
        // 有歌曲
        s = JSON.parse(s);
        if (this.loop == 2) {
          // 随机事件
          let a = Math.floor(Math.random() * s.length);
          // this.$store.state.currentSong = a;
          this.$store.commit("changeCurrentSong", a);
          this.currentItem = a;
        } else {
          if (this.currentItem - 1 >= 0) {
            this.currentItem--;
            // this.$store.state.currentSong--;
            this.$store.commit(
              "changeCurrentSong",
              this.$store.state.currentSong - 1
            );
          } else {
            // this.$store.state.currentSong = s.length - 1;
            this.$store.commit("changeCurrentSong", s.length - 1);
            this.currentItem = s.length - 1;
          }
        }
        this.currentSong = s[this.currentItem];
        this.currentTime = 0;
        this.lastTime = 0;
        this.getSongLyric();
        this.getSongUrl();
        // this.$refs.audio.currentTime = 0;
      }
    },
    nextSong() {
      // 先判断localStorage中有没有歌曲
      this.lastItem = this.currentItem;
      let s = localStorage.getItem("songLists");
      if (s) {
        // 有歌曲
        s = JSON.parse(s);
        if (this.loop == 2) {
          // 随机事件
          let a = Math.floor(Math.random() * s.length);
          // this.$store.state.currentSong = a;
          this.$store.commit("changeCurrentSong", a);
          this.currentItem = a;
        } else {
          if (this.currentItem + 1 < s.length) {
            this.currentItem++;
            // this.$store.state.currentSong++;
            this.$store.commit(
              "changeCurrentSong",
              this.$store.state.currentSong + 1
            );
          } else {
            // this.$store.state.currentSong = 0;
            this.$store.commit("changeCurrentSong", 0);
            this.currentItem = 0;
          }
        }
        this.currentSong = s[this.currentItem];
        this.currentTime = 0;
        this.lastTime = 0;
        this.getSongLyric();
        this.getSongUrl();
        // this.$refs.audio.currentTime = 0;
      }
    },
    // 初始化准备播放的歌曲
    playInit() {
      // 先判断localStorage中有没有歌曲
      let s = localStorage.getItem("songLists");
      if (s) {
        // 有歌曲
        s = JSON.parse(s);
        this.currentSong = s[this.currentItem];
        this.currentTime = 0;
        this.lastTime = 0;
        this.getSongLyric();
        this.getSongUrl();
        // this.$refs.audio.currentTime = 0;
      } else {
        // 没有歌曲
        this.currentSong = {
          id: "",
          name: "",
          ar: [],
          al: { picUrl: this.user },
          dt: 0,
          mv: 0,
        };
      }
    },
    // 获取歌曲列表
    getSongList() {
      var s = localStorage.getItem("songLists");
      if (s) {
        this.songLists = JSON.parse(s);
        this.songListsLength = this.songLists.length;
        this.showSong = true;
      } else {
        this.songLists = [];
        this.songListsLength = 0;
        this.showSong = false;
      }
    },
    init() {
      // 初始化歌词
      this.$refs.audio.addEventListener("timeupdate", (e) => {
        let timeStamp = Math.floor(e.target.currentTime * 1000);
        this.activeIndex = this.lyric[0].findIndex((item, index) => {
          return item.ms < timeStamp && this.lyric[0][index + 1]
            ? this.lyric[0][index + 1].ms > timeStamp
            : true;
        });
        if (!this.moveL) {
          this.$refs.lyric.style.transform =
            "translateY(" + (-27 * this.activeIndex + 108) + "px)";
        }
      });
    },
    lyricScrollInit() {
      // 歌词滚动初始化
      this.$refs.lyric.style.transform = "translateY(108px)";
    },
    moveLyric(ai) {
      // 移动歌词
      let ly = this.$refs.lyric;
      let maxD = -27 * this.lyric[0].length + 108;
      this.moveL = true;
      let that = this;
      // let ai = this.activeIndex;
      ly.onmousedown = function (e) {
        // that.moveL = true;
        var ev = e || window.event; //兼容ie浏览器
        //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
        var distanceY = ev.clientY;
        document.onmousemove = function (e) {
          var ev = e || window.event; //兼容ie浏览器
          let d = -27 * ai + 108 + ev.clientY - distanceY;
          // console.log(d);
          ly.style.transform = "translateY(" + d + "px)";
          if (d <= maxD) {
            console.log(d, maxD);
            setTimeout(() => {
              ly.style.transform = "translateY(" + maxD + "px)";
            }, 500);
          }
          if (d >= 108) {
            console.log(d, maxD);
            setTimeout(() => {
              ly.style.transform = "translateY(108px)";
            }, 500);
          }
        };
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
          clearTimeout(that.timeOutL);
          that.timeOutL = setTimeout(() => {
            that.moveL = false;
            // console.log(that.moveL, 330);
          }, 2000);
        };
      };
    },
    // 点击歌词后从该歌词位置播放
    lyricClick(item, i) {
      this.$refs.audio.currentTime = item.ms / 1000;
      this.$refs.lyric.style.transform =
        "translateY(" + (-27 * i + 108) + "px)";
    },
    getSongLyric() {
      this.axios({
        url: "/lyric?id=" + this.currentSong.id,
      })
        .then((res) => {
          // 原歌词
          this.lyric[0] = lrc2Json(res.data.lrc.lyric);
          if (this.lyric[0].length > 0) {
            this.showLyric = true;
            this.lyricScrollInit();
            this.init();
          } else {
            this.showLyric = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getSongUrl() {
      this.axios({
        url: "/song/url?id=" + this.currentSong.id,
      })
        .then((res) => {
          this.src = res.data.data[0].url;
          // console.log(res.data);
          if (!this.src) {
            // 歌曲没有播放资源时，播放下一首
            this.tipMessage = "歌曲：" + this.currentSong.name + "暂时无法播放";
            this.showTip = true;
            if (this.currentItem + 1 == this.songListsLength) {
              this.playNewSong(0);
            } else {
              this.playNewSong(this.currentItem + 1);
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    setMuted() {
      if (this.mute) {
        this.voice = this.lastVoice;
        this.$refs.audio.volume = this.lastVoice / 100;
        this.mute = false;
        this.$refs.audio.muted = false;
      } else {
        this.voice = 0;
        this.$refs.audio.volume = 0;
        this.mute = true;
        this.$refs.audio.muted = true;
      }
    },
    playAudio() {
      //播放歌曲
      if (this.play) {
        this.$refs.audio.pause();
      } else {
        Math.abs(this.currentTime - this.$refs.audio.currentTime) > 2
          ? (this.$refs.audio.currentTime = this.currentTime)
          : "";
        this.$refs.audio.play();
        this.$refs.audio.volume = this.voice / 100;
      }
    },
    changeSongVoice(val) {
      if (val == 0) {
        this.mute = true;
        this.$refs.audio.muted = true;
        this.$refs.audio.volume = 0;
      } else {
        this.mute = false;
        this.$refs.audio.muted = false;
        this.lastVoice = val;
        this.$refs.audio.volume = val / 100;
      }
    },
    audioTimeUpdate() {
      // 更新歌曲时间。 进度条的 节流，每秒触发一次
      let nowTime = Date.now();
      let gapTime = 1000;
      if (!this.lastTime || nowTime - this.lastTime > gapTime) {
        if (this.$refs.audio) {
          let time = this.$refs.audio.currentTime;
          this.currentTime = time;
        }
        this.lastTime = nowTime;
      }
    },
    changeSongTime(val) {
      // 改变歌曲时间
      if (this.$refs.audio) {
        this.$refs.audio.currentTime = val;
      }
    },

    getAudioLength() {
      this.audioLength = this.$refs.audio.duration;
      this.$refs.audio.currentTime = 0;
      // 加载歌曲url后修改播放状态
      if (this.play) {
        this.$refs.audio.play();
        this.$refs.audio.volume = this.voice / 100;
      } else {
        this.$refs.audio.pause();
      }
    },
    handlePlay(status) {
      //status 1播放 2暂停
      status == 1 ? (this.play = true) : (this.play = false);
      // console.log(this.play);
    },
    clickHome() {
      this.$router.push("/home");
    },
    clickMy() {
      this.$router.push("/my");
    },
    clickArtist(id) {
      console.log(id);
      this.playArtistDetail(id);
    },
    clickMv(id) {
      this.playMv(id);
    },
    clickSong(id) {
      console.log(id);
      this.playSong(id);
    },
    hideControl(index) {
      this.cs[index].style.display = "none";
      this.ns[index].style.maxWidth = "90%";
    },
    showControl(index) {
      this.cs = document.querySelectorAll(".item-control");
      this.ns = document.querySelectorAll(".item-name-txt");
      this.cs[index].style.display = "block";
      this.ns[index].style.maxWidth = "65%";
      // console.log(this.ns[index].style);
    },
    closeListS() {
      this.showTip = false;
    },
    closeListC() {
      this.showList = false;
      this.$refs.list.style.display = "none";
    },
    // 显示隐藏list模块
    showListC() {
      this.showList = !this.showList;
      if (this.showList) {
        this.$refs.list.style.display = "block";
      } else {
        this.$refs.list.style.display = "none";
      }
    },
    // 显示隐藏音乐控制模块
    showSongControl() {
      // console.log("show");
      if (!this.lock) {
        this.$refs.songControl.style.transform = "translateY(-45px)";
        setTimeout(() => {
          this.lockTime = true;
        }, 1000);
      }
    },
    hideSongControl() {
      // console.log("hide");
      if (!this.lock && !this.showList && this.lockTime) {
        setTimeout(() => {
          this.$refs.songControl.style.transform = "translateY(0)";
          this.lockTime = false;
        }, 1000);
      }
    },
  },
};
</script>

<style>
.song-play-bar {
  position: fixed;
  zoom: 1;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  width: 100vw;
  z-index: 1002;
}
.song-play-bar .song-control {
  position: absolute;
  zoom: 1;
  top: -5px;
  left: 0;
  height: 50px;
  width: 100%;
  margin: 0 auto;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-property: transform;
  transition-duration: 500ms;
  transform: translateY(0);
}
.song-play-bar .updn {
  position: absolute;
  top: -15px;
  right: 50px;
  height: 15px;
  width: 60px;
  text-align: center;
  border-bottom: 15px solid rgba(0, 0, 0, 0.9);
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  z-index: 11;
}
.song-play-bar .updn .iconfont {
  font-size: 14px;
  color: #ccc;
}
.song-play-bar .updn .iconfont:hover {
  color: #fff;
}
.song-play-bar .bg {
  height: 50px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9);
}
.song-play-bar .hand {
  position: absolute;
  top: -15px;
  width: 100%;
  height: 20px;
  cursor: pointer;
}
.song-play-bar .song-player {
  position: absolute;
  padding-left: 50px;
  left: 50%;
  top: 0;
  width: 1200px;
  transform: translateX(-50%);
}
/* btns */
.song-play-bar .song-player .btns {
  float: left;
  width: 150px;
  height: 50px;
}
.song-play-bar .song-player .btns a {
  display: block;
  float: left;
  margin-right: 10px;
  margin-top: 15px;
  width: 28px;
  height: 28px;
  text-align: center;
}
.song-play-bar .song-player .btns .play {
  width: 38px;
  height: 38px;
}
.song-play-bar .song-player .btns .iconfont {
  font-size: 12px;
  padding: 5px;
  color: #ccc;
  border: 2px solid #ccc;
  border-radius: 50%;
}
.song-play-bar .song-player .btns .play .iconfont {
  font-size: 18px;
  padding: 8px;
}
.song-play-bar .song-player .btns a:hover .iconfont {
  text-shadow: 0 0 2px #fff;
  box-shadow: 0 0 4px 2px #fff;
}
/* head */
.song-play-bar .song-player .head {
  float: left;
  margin-right: 20px;
}
.song-play-bar .song-player .head a {
  display: block;
  margin-top: 5px;
  width: 40px;
  height: 40px;
}
.song-play-bar .song-player .head .song-pic {
  width: 40px;
  height: 40px;
  border-radius: 3px;
  border: 1px solid #333;
  box-shadow: 0 0 1px 1px #666;
}
/* play */
.song-play-bar .song-player .play {
  position: relative;
  float: left;
  margin-right: 20px;
  width: 60%;
}
.song-play-bar .song-player .play .words {
  width: 100%;
  height: 24px;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.song-play-bar .song-player .play .words .song-name {
  float: left;
  font-weight: 400;
  margin: 0 !important;
  white-space: nowrap;
}
.song-play-bar .song-player .play .words .song-artist {
  float: left;
  font-weight: 400;
  margin: 0 0 0 10px !important;
  white-space: nowrap;
}
.song-play-bar .song-player .play .words .song-name a {
  color: #e8e8e8;
}
.song-play-bar .song-player .play .words .song-name a:hover,
.song-play-bar .song-player .play .words .song-artist a:hover {
  text-decoration: underline;
}
.song-play-bar .song-player .play .words .song-mv,
.song-play-bar .song-player .play .words .song-vip {
  float: left;
  margin-left: 10px;
}
.song-play-bar .song-player .play .words .song-mv .iconfont {
  color: var(--color-theme);
}
.song-play-bar .song-player .play .words .song-vip .iconfont {
  font-size: 14px;
  color: var(--color-theme);
}
.song-play-bar .song-player .play .words .song-artist a {
  color: #999;
  font-size: 14px;
}
.song-play-bar .song-player .play .progress {
  position: relative;
  width: 100%;
}
.song-play-bar .song-player .play .progress .song-progress {
  position: absolute;
  top: -10px;
  width: 87%;
}
.song-play-bar .song-player .play .progress .song-time {
  float: right;
  font-size: 14px;
  color: #999;
}
.song-play-bar .song-player .play .progress .song-time span {
  color: #e8e8e8;
}
/* oper */
.song-play-bar .song-player .oper {
  float: left;
  height: 50px;
  line-height: 50px;
}
.song-play-bar .song-player .oper a {
  margin-right: 10px;
}
.song-play-bar .song-player .oper .iconfont {
  font-weight: 600;
  font-size: 20px;
  color: #999;
}
.song-play-bar .song-player .oper a:hover .iconfont {
  color: #ccc;
}
/* ctrl */
.song-play-bar .song-player .ctrl {
  position: relative;
  float: left;
  height: 50px;
  line-height: 50px;
}
/* song-voice */
.song-play-bar .song-player .ctrl .song-voice {
  position: relative;
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
  height: 50px;
  line-height: 50px;
  color: #999;
  cursor: pointer;
}
.song-play-bar .song-player .ctrl .song-voice .iconfont {
  font-size: 20px;
}
.song-play-bar .song-player .ctrl .song-voice:hover {
  color: #ccc;
}
.song-voice:hover .song-voice-slide {
  display: block;
}
.song-voice-slide:hover {
  display: block;
}
.song-voice-slide {
  display: none;
  position: absolute;
  bottom: 50px;
  left: -8px;
  height: 130px;
  padding-top: 15px;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 10;
}
/* song-loop */
.song-play-bar .song-player .ctrl .song-loop {
  margin-right: 10px;
}
.song-play-bar .song-player .ctrl .song-loop .iconfont {
  font-weight: 600;
  font-size: 20px;
  color: #999;
}
.song-play-bar .song-player .ctrl .song-loop a:hover .iconfont {
  color: #ccc;
}
/* add */
.song-play-bar .song-player .ctrl .add {
  position: relative;
}
.song-play-bar .song-player .ctrl .add .tip {
  display: block;
  position: absolute;
  top: -59px;
  left: 20px;
  padding: 10px;
  width: 140px;
  line-height: 20px;
  font-size: 14px;
  color: #ccc;
  text-align: center;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.7);
}
.song-play-bar .song-player .ctrl .add .bg {
  position: absolute;
  display: inline-block;
  top: -3px;
  left: 16px;
  width: 50px;
  height: 20px;
  border-radius: 0 10px 10px 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: -1;
}
.song-play-bar .song-player .ctrl .add a {
  font-size: 14px;
  color: #ccc;
}
.song-play-bar .song-player .ctrl .add .iconfont {
  font-weight: 600;
  font-size: 20px;
  color: #999;
}
.song-play-bar .song-player .ctrl .add a:hover .iconfont {
  color: #ccc;
}
.song-play-bar .song-player .ctrl .tip {
  display: block;
  position: absolute;
  top: -41px;
  left: 9px;
  padding: 10px;
  width: 80px;
  line-height: 20px;
  font-size: 14px;
  color: #ccc;
  text-align: center;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.7);
}
/* list */
.song-control .list {
  position: absolute;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
  width: 1200px;
  height: 380px;
  z-index: -1;
  display: none;
}
.song-control .list .list-hd {
  position: relative;
  height: 40px;
  line-height: 40px;
  border-radius: 10px 10px 0 0;
  background-color: rgba(0, 0, 0, 0.9);
}
.song-control .list .list-hd h4 {
  position: absolute;
  left: 35px;
  font-size: 16px;
  color: #e2e2e2;
}
.song-control .list .list-hd .add-all {
  position: absolute;
  left: 450px;
  font-size: 13px;
  color: #ccc;
}
.song-control .list .list-hd .iconfont {
  font-size: 13px;
  color: #ccc;
}
.song-control .list .list-hd .clear {
  position: absolute;
  left: 540px;
  font-size: 13px;
  color: #ccc;
}
.song-control .list .list-hd .line {
  position: absolute;
  left: 597px;
  height: 40px;
  border-left: 2px solid #333;
}
.song-control .list .list-hd p {
  position: absolute;
  left: 625px;
  width: 550px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #e2e2e2;
  text-align: center;
}
.song-control .list .list-hd .close {
  position: absolute;
  right: 5px;
  width: 30px;
  height: 30px;
  text-align: center;
  font-size: 0;
  cursor: pointer;
}
.song-control .list .list-hd .close .iconfont {
  font-size: 16px;
}
/* .song-control .list .list-bd */
.song-control .list .list-bd {
  position: relative;
  height: 340px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.7);
}
.song-control .list .list-bd .list-bg {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1500px;
  height: 1500px;
  filter: blur(50px);
  -webkit-filter: blur(50px); /* chrome, opera */
  -ms-filter: blur(50px);
  -moz-filter: blur(50px);
  z-index: -11;
}
.song-control .list .list-bd .msk {
  position: absolute;
  left: 0;
  top: 0;
  width: 600px;
  height: 100%;
  border-right: 5px solid rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.2);
  z-index: -10;
}
/* no-song */
.song-control .list .list-bd .no-song {
  position: absolute;
  top: 100px;
  left: 0;
  width: 600px;
  line-height: 50px;
  font-size: 14px;
  color: #ccc;
  text-align: center;
}
.song-control .list .list-bd .no-song a {
  color: #ccc;
  text-decoration: underline;
}
/* list-song */
.song-control .list .list-bd .list-song {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 100%;
  overflow-y: auto;
}
.song-control .list .list-bd .list-song::-webkit-scrollbar {
  display: block;
  width: 5px;
}
.song-control .list .list-bd .list-song::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.2);
}
.song-control .list .list-bd .list-song::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.5);
}
.song-control .list .list-bd .list-song .list-song-item {
  position: relative;
  height: 30px;
  line-height: 30px;
}
.song-control .list .list-bd .list-song .list-song-item.active-item,
.song-control .list .list-bd .list-song .list-song-item:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.song-control .list .list-bd .list-song .list-song-item .item-play {
  float: left;
  padding-left: 10px;
  width: 30px;
  height: 30px;
}
.song-control .list .list-bd .list-song .list-song-item .item-play .iconfont {
  font-size: 14px;
  color: var(--color-theme);
}
.song-control .list .list-bd .list-song .list-song-item .item-songname {
  position: relative;
  float: left;
  width: 60%;
  height: 30px;
  line-height: 30px;
}
.song-control
  .list
  .list-bd
  .list-song
  .list-song-item
  .item-songname
  .item-name-txt {
  float: left;
  height: 30px;
  line-height: 30px;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.song-control
  .list
  .list-bd
  .list-song
  .list-song-item
  .item-songname
  .item-name-txt
  a,
.song-control .list .list-bd .list-song .list-song-item .item-artist a,
.song-control .list .list-bd .list-song .list-song-item .item-time {
  color: #ccc;
  font-size: 14px;
}
.song-control
  .list
  .list-bd
  .list-song
  .list-song-item.active-item
  .item-songname
  .item-name-txt
  a,
.song-control
  .list
  .list-bd
  .list-song
  .list-song-item:hover
  .item-songname
  .item-name-txt
  a,
.song-control
  .list
  .list-bd
  .list-song
  .list-song-item.active-item
  .item-artist
  a,
.song-control .list .list-bd .list-song .list-song-item:hover .item-artist a,
.song-control .list .list-bd .list-song .list-song-item.active-item .item-time,
.song-control .list .list-bd .list-song .list-song-item:hover .item-time,
.song-control
  .list
  .list-bd
  .list-song
  .list-song-item.active-item
  .item-artist,
.song-control .list .list-bd .list-song .list-song-item:hover .item-artist {
  color: #fff;
}
.song-control
  .list
  .list-bd
  .list-song
  .list-song-item
  .item-songname
  .item-control {
  float: right;
  margin-right: 20px;
  display: none;
}
.song-control
  .list
  .list-bd
  .list-song
  .list-song-item
  .item-songname
  .item-control
  a {
  margin-right: 5px;
  color: #ccc;
}
.song-control
  .list
  .list-bd
  .list-song
  .list-song-item
  .item-songname
  .item-control
  a:hover {
  color: #fff;
}
.song-control .list .list-bd .list-song .list-song-item .item-artist {
  float: left;
  width: 20%;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ccc;
}
.song-control .list .list-bd .list-song .list-song-item .item-time {
  float: left;
  margin-left: 20px;
}
.song-control .list .list-bd .list-song-position {
  position: absolute;
  left: 570px;
  bottom: 20px;
  cursor: pointer;
}
.song-control .list .list-bd .list-song-position .iconfont {
  font-size: 20px;
  color: var(--color-theme);
}
/* lyric */
.song-control .list .list-bd .no-lyric {
  position: absolute;
  top: 100px;
  right: 0;
  width: 600px;
  line-height: 50px;
  font-size: 14px;
  color: #ccc;
  text-align: center;
}
.song-control .list .list-bd .msk2 {
  position: absolute;
  right: 0;
  top: 0;
  width: 600px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: -10;
}
.song-control .list .list-bd .song-lyric {
  position: absolute;
  top: 0;
  right: 0;
  width: 600px;
  height: 100%;
  /* overflow-y: auto; */
  text-align: center;
}
/* .song-control .list .list-bd .song-lyric::-webkit-scrollbar {
  display: block;
  width: 5px;
}
.song-control .list .list-bd .song-lyric::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.2);
}
.song-control .list .list-bd .song-lyric::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.5);
} */

.lyric-content {
  position: relative;
  margin-top: 20px;
  width: 100%;
  height: 310px;
  user-select: none;
  overflow: hidden;
}
.lyric-item-wrapper {
  text-align: center;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-property: transform;
  transition-duration: 500ms;
}
.lyric-item {
  color: #ccc;
  min-height: 27px;
  line-height: 27px;
  font-size: 14px;
  transition: all 1s;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.lyric-item.active {
  min-height: 40px;
  line-height: 40px;
  font-size: 20px;
  color: var(--color-theme);
  white-space: normal;
}

/* song-message-show */
.song-message-show {
  position: absolute;
  top: -50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  height: 200px;
  width: 500px;
  background-color: var(--color-theme-light-5);
  border-radius: 10px;
  box-shadow: 0 0 10px 3px #999;
  overflow: hidden;
  z-index: 1005;
}
.song-message-hd {
  padding: 0 10px 0 20px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  color: #f2f2f2;
  background-color: var(--color-theme);
}
.song-message-hd .close {
  position: absolute;
  right: 5px;
  width: 30px;
  height: 30px;
  text-align: center;
  font-size: 0;
  cursor: pointer;
}
.song-message-hd .close .iconfont {
  font-size: 16px;
}
.song-message-bd {
  position: relative;
  width: 100%;
  height: 160px;
}
.song-message-bd .song-message-content {
  position: relative;
  width: 100%;
  height: 100px;
}
.song-message-bd .song-message-content p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  text-align: center;
}
.song-message-bd .song-message-btn {
  position: relative;
  width: 100%;
  height: 60px;
}
.song-message-bd .song-message-btn .el-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>